import React, { useEffect, useRef, useCallback, useState } from 'react'
import { connect } from 'react-redux'
import { getUser, dealVideo } from '@/redux/async'
import { Helmet } from 'react-helmet'
import { formatCount, getPicUrl } from 'utils/index'
import { getUserVideos } from 'api/base'
import ScrollToTop from '@/components/ScrollToTop/ScrollToTop'
const sexClass = {
    男: 'icon-sex-man',
    女: 'icon-sex-woman',
    保密: 'icon-sex-secrecy'
}
function UpUser(props) {
    const { match, dispatch, upUser } = props
    const introRef = useRef()
    const arrowRef = useRef()
    const contentRef = useRef()
    const [isexpand, setIsexpand] = useState(false)
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(false)
    const [video, setVideo] = useState([])
    const [uId] = useState(match.params.mId)
    useEffect(() => {
        dispatch(getUser(uId))
    }, [uId])
    useEffect(() => {
        const arrowDOM = arrowRef.current
        const introDOM = introRef.current
        const contentDOM = contentRef.current
        if (contentDOM.offsetHeight <= introDOM.offsetHeight) {
            arrowDOM.style.display = 'none'
        } else {
            arrowDOM.style.display = 'block'
        }
    }, [])
    useEffect(() => {
        getUserVideos({ uId, p: page, size: 10 }).then((res) => {
            const { vlist, pages } = res.data.data
            const videos = dealVideo(vlist)
            setHasMore(page < pages)
            setVideo((video) => video.concat(videos))
        })
    }, [uId, page])
    const toggle = useCallback(() => {
        const arrowDOM = arrowRef.current
        const introDOM = introRef.current
        const contentDOM = contentRef.current
        if (isexpand) {
            introDOM.style.height = null
            arrowDOM.classList.add('rotate')
            setIsexpand(false)
        } else {
            introDOM.style.height = `${contentDOM.offsetHeight}px`
            arrowDOM.classList.remove('rotate')
            setIsexpand(true)
        }
    })
    return (
        <div className="up">
            <div className="up-user">
                {upUser ? (
                    <Helmet>
                        <title>{upUser.name + '的个人空间'}</title>
                    </Helmet>
                ) : null}
                <div className="up-main">
                    <div className="face">
                        <img src={getPicUrl(upUser.face, '@160w_160h')} alt={upUser.name} />
                    </div>
                    <div className="info flex middle">
                        <div className="col-333 xxl">{upUser.name || ''}</div>
                        <span className={`sex ${sexClass[upUser.sex]}`} />
                        {upUser.level ? (
                            <img
                                className="level"
                                src={require(`../../assets/images/lv${upUser.level}.png`)}
                            />
                        ) : null}
                        <span className="uid">UID:{upUser.mId}</span>
                    </div>
                    <div className="mt10">
                        <div className="flex middle">
                            <div className="l">{formatCount(upUser.following)}</div>&nbsp; 关注
                            <div className="l ml10">{formatCount(upUser.follower)}</div>&nbsp; 粉丝
                        </div>
                        <div className="intro" ref={introRef}>
                            <i
                                className={`icon-arrow-down arrow`}
                                ref={arrowRef}
                                onClick={() => toggle()}
                            />
                            <div className="desc" ref={contentRef}>
                                {upUser.sign}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* 投稿 */}
            <div className="piece">
                <div className="l item">Ta的投稿</div>
                <div className="vlist">
                    {video.map((e) => (
                        <a key={e.aId} href={'/video/av' + e.aId}>
                            <div className="flex ">
                                <div className="av-imgbox">
                                    <img src={getPicUrl('https:' + e.pic, '@200w_125h')} alt="" />
                                    <div className="duration">{e.duration}</div>
                                </div>
                                <div className="cell-main ml10">
                                    <div className="l row2 av-title mb10">{e.title}</div>
                                    <div className="flex col-hui m middle">
                                        <div className="cell-main">
                                            <img
                                                src={require('../../assets/images/ico-play.png')}
                                                alt=""
                                                className="av-ico mr5"
                                            />
                                            {formatCount(e.playCount)}
                                        </div>
                                        <div className="cell-main">
                                            <img
                                                src={require('../../assets/images/ico-danmu.png')}
                                                alt=""
                                                className="av-ico mr5"
                                            />
                                            {formatCount(e.barrageCount)}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    ))}
                </div>
                {video.length > 0 && hasMore ? (
                    <div
                        className="av-more"
                        onClick={() => {
                            setPage((page) => ++page)
                        }}
                    >
                        刚刚看到这里，点击加载更多~
                    </div>
                ) : (
                    <div className="tips">
                        <img
                            src={require('../../assets/images/tips.png')}
                            alt=""
                            className="icon"
                        />
                        <span className="text">Ta还没有投过稿~</span>
                    </div>
                )}
            </div>
            <ScrollToTop />
        </div>
    )
}

export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(UpUser)
